<template>
  <!-- <div style="position:relative;height:100%;"> -->
    <div :class="fullScreenStatus ? 'map-wrap-full' : 'map-wrap'">
      <div
        id="eden-map"
        :class="fullScreenStatus ? 'map-full' : ''"
      ></div>
    </div>
  <!-- </div> -->

</template>
<script>
import AMap from "AMap";
import SHOP_PNG from "./icon/shop.png";
import { getShopLocation } from "@/api/getData";
export default {
  mounted() {
    this.mapInit();
    this.getPoints();
  },
  data() {
    return {
      points: [],
      map: "",
      fullScreenStatus: false,
      MarkerClustererMarker: "",
      vMarkerClustererMarkers: [],
      vMarkerClustererStatus: true
    };
  },
  methods: {
    updateDatas(data) {
      this.$emit("sendData", data);
    },
    mapInit() {
      this.map = new AMap.Map("eden-map", {
        resizeEnable: true,
        center: [105, 34],
        zoom: 5,
        mapStyle: "amap://styles/fresh"
      });
    },
    markerClustererInit() {
      var points = this.points;
      if (points.length > 0) {
        const _this = this;
        for (let i = 0; i < points.length; i++) {
          let marker = new AMap.Marker({
            position: new AMap.LngLat(points[i].lng, points[i].lat),
            icon: SHOP_PNG,
            // content:
            //   '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            offset: new AMap.Pixel(-15, -15),
            extData: i
          });
          var infoWindow = new AMap.InfoWindow({
            isCustom: true,
            offset: new AMap.Pixel(20, -30)
          });

          marker.content = i;
          marker.on("click", markerClick);
          function markerClick(e) {
            //构建信息窗体中显示的内容
            var index = e.target.content;
            var shop = points[index];
            // var info = [];
            // info.push(
            //   `<h4 style='background-color:#09baf0;text-align:center;color:#fff;line-height:20px;margin:0'>${
            //     shop.name
            //   }</h4><div> `
            // );
            // info.push(
            //   `<p style='line-height:20px;margin:0'>所属区域 : ${
            //     shop.depName
            //   }</p>`
            // );
            // info.push(
            //   `<p style='line-height:20px;margin:0'>所属联网单位 : ${
            //     shop.groupName
            //   }</p>`
            // );
            // info.push(
            //   `<p style='line-height:20px;margin:0'>负责人 : ${
            //     shop.managerName
            //   }</p>`
            // );
            // info.push(
            //   `<p style='line-height:20px;margin:0'>联系电话 : ${
            //     shop.managerMobile
            //   }</p>`
            // );
            // info.push(
            //   `<p style='line-height:20px;margin:0'>报警数 : ${
            //     shop.alarmCount
            //   }</p>`
            // );
            // info.push(
            //   `<p style='line-height:20px;margin:0'>地址 :${
            //     shop.addr
            //   }</p></div>`
            // );

            // infoWindow.setContent(info.join(""));
            // infoWindow.open(_this.map, e.target.getPosition());

            //实例化信息窗体
            var title = shop.name;
            var content = [];
            content.push(`<p ><span>所属区域 :</span> ${shop.depName}</p>`);
            content.push(`<p ><span>联网单位 :</span> ${shop.groupName}</p>`);
            content.push(`<p ><span>负责人 :</span> ${shop.managerName}</p>`);
            content.push(
              `<p ><span>联系电话 :</span> ${shop.managerMobile}</p>`
            );
            content.push(`<p ><span>设备数 :</span> ${shop.devCount}</p>`);
            content.push(`<p ><span>报警数 :</span> ${shop.alarmCount}</p>`);
            content.push(`<p ><span>商铺地址 :</span>${shop.addr}</p></div>`);
            // var infoWindow = new AMap.InfoWindow({
            //   isCustom: true, //使用自定义窗体
            //   content: createInfoWindow(title, content.join("<br/>")),
            //   offset: new AMap.Pixel(16, -45)
            // });

            //构建自定义信息窗体
            function createInfoWindow(title, content) {
              var info = document.createElement("div");
              info.className = "custom-info input-card content-window-card";

              //可以通过下面的方式修改自定义窗体的宽高
              //info.style.width = "400px";
              // 定义顶部标题
              var top = document.createElement("div");
              var titleD = document.createElement("div");
              var closeX = document.createElement("img");
              top.className = "info-top";
              titleD.innerHTML = title;
              closeX.src = "https://webapi.amap.com/images/close2.gif";
              closeX.onclick = closeInfoWindow;

              top.appendChild(titleD);
              top.appendChild(closeX);
              info.appendChild(top);

              // 定义中部内容
              var middle = document.createElement("div");
              middle.className = "info-middle";
              middle.style.backgroundColor = "white";
              middle.innerHTML = content;
              info.appendChild(middle);

              // 定义底部内容
              var bottom = document.createElement("div");
              bottom.className = "info-bottom";
              bottom.style.position = "relative";
              bottom.style.top = "0px";
              bottom.style.margin = "0 auto";
              var sharp = document.createElement("img");
              sharp.src = "https://webapi.amap.com/images/sharp.png";
              bottom.appendChild(sharp);
              info.appendChild(bottom);
              return info;
            }

            //关闭信息窗体
            function closeInfoWindow() {
              _this.map.clearInfoWindow();
            }

            infoWindow.setContent(createInfoWindow(title, content.join("")));
            infoWindow.open(_this.map, e.target.getPosition());
          }
          _this.vMarkerClustererMarkers.push(marker);
        }
        AMap.plugin(["AMap.MarkerClusterer"]);
        // AMap.plugin(["AMap.ToolBar", "AMap.MouseTool", "AMap.MarkerClusterer"]);
        AMap.plugin(
          ["AMap.ToolBar", "AMap.Scale", "AMap.OverView", "AMap.MapType"],
          function() {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            _this.map.addControl(new AMap.ToolBar());

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            _this.map.addControl(new AMap.Scale());

            // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
            _this.map.addControl(new AMap.OverView({ isOpen: true }));

            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            _this.map.addControl(new AMap.MapType());
          }
        );
        _this.map.addControl(
          (_this.MarkerClustererMarker = new AMap.MarkerClusterer(
            _this.map,
            _this.vMarkerClustererMarkers,
            { gridSize: 80 }
          ))
        );
        _this.map.setFitView();
      }
    },
    async getPoints() {
      let res = await getShopLocation({});
      if (res.code == 0) {
        console.log(res);
        this.points = res.data;
        this.markerClustererInit();
      }
    },
    fullScreen() {
      this.fullScreenStatus = !this.fullScreenStatus;
    },
    locateMarker(lng, lat) {
      this.map.setZoomAndCenter(17, [lng, lat]);
    }
  }
};
</script>
<style>
.map-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2020;
}
.map-wrap-full {
  position: fixed;
  width: 100% !important;
  height: 100% !important;
  z-index: 2020;
  top: 0;
  left: 0;
}
.map-full {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.map-wrap #eden-map {
  width: 100%;
  height: 100%;
}
.map-operator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  height: 85px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.map-operator > div {
  position: relative;
  width: 52px;
  height: 52px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px;
  cursor: pointer;
}
.map-operator .drawing {
  background-image: url("icon/draw.png");
  color: #fe6579;
}
.map-operator .submit {
  background-image: url("icon/submit.png");
  color: #a9ea0a;
}
.map-operator .clear {
  background-image: url("icon/clear.png");
  color: #b8c5cd;
}

.map-operator > div > div {
  position: absolute;
  width: 52px;
  height: 22px;
  line-height: 22px;
  left: 0;
  bottom: -22px;
  font-size: 14px;
}
.marker {
  position: absolute;
  top: -20px;
  right: -118px;
  color: #fff;
  padding: 4px 10px;
  box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
  white-space: nowrap;
  font-size: 12px;
  font-family: "";
  background-color: #25a5f7;
  border-radius: 3px;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  line-height: 20px;
}
.content-window-card p span {
  float: left;
  width: 58px;
  color: #a1a1a1;
}
.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #09baf0;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  width: 100%;
  text-align: center;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 10px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}
</style>
